<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="format-detection" content="telephone=no" />
    <title>色情检测（视频）</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="shortcut icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="/front/css/style.css" />
    <link rel="stylesheet" href="/front/css/slick.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="wp">
            <div class="logo">
                <a href=""><img src="images/logo.png" alt=""></a>
            </div>
            <div>
                <div class="col-r">
                    <ul class="nav" th:include="front/header::header1">

                    </ul>
                    <div class="hd-tel"><a onclick="showPhone();"></a></div>
                    <div class="soBox">
                        <span class="btn-so"></span>
                        <div class="con">
                            <form action="">
                                <input type="text" class="inp" name="articleTitle" id="articleTitle">
                                <input type="hidden" id="telephone">
                                <input onclick="search();"  type="button" value="" class="sub">
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- 头部 -->
    <div class="banner" style="background-image: url(images/ban1.jpg);">
        <h3 class="tit">欢迎进入在线检测管理中心</h3>
    </div>
    <!-- 内容 -->
    <div class="main">
        <div class="row-test" style="background: #efefef;">
            <div class="wp">
                <div class="inner">
                    <div class="cur"><a href=""><img src="images/img34.png" alt="">首页</a>&gt;<a href="">视频检测</a>&gt;<span>色情检测</span></div>
                    <div class="col-l" id="show">
                    </div>
                    <div class="col-r">
                        <div class="m-file">
                            <div class="txt1">
                                <input type="text" disabled class="inp1" placeholder="请先上传视频">
                                <label>
                                    <input type="file" id="file" class="inp2" onchange="uploadFile('102');">
                                </label>
                            </div>
                            <div class="txt2">
                                <div class="m-progress">
                                    <div class="pic">
                                        <div class="line" id="widthRate"></div>
                                    </div>
                                    <div class="txt">正在检测 <span id="percentRate">0%</span></div>
                                </div>
                                <!--<button class="m-btn2">重选素材</button>-->
                                <button class="m-btn1" onclick="startCheck();">开始检测</button>
                            </div>
                        </div>
                        <h3 class="m-tit4"><img src="images/img36.png" alt="">检测结果</h3>
                        <div class="m-txt2">
                            <div class="con" id="divHtml">
                                <!--<div class="item">
                                    <div class="pic">
                                        <img src="images/img40.jpg" alt="">
                                    </div>
                                    <p>03:26-04:30</p>
                                </div>
                                <div class="item">
                                    <div class="pic">
                                        <img src="images/img40.jpg" alt="">
                                    </div>
                                    <p>07:26-09:30</p>
                                </div>
                                <div class="item">
                                    <div class="pic">
                                        <img src="images/img40.jpg" alt="">
                                    </div>
                                    <p>15:26-17:30</p>
                                </div>-->
                            </div>
                            <p>点击图片立即跳转视频所在位置</p>
                            <!--<button class="m-btn2">保存结果</button>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容 -->
    <!-- 底部 -->
    <div class="footer">
        <div class="con-top">
            <div class="wp">
                <div class="col-l">
                    <div class="f-logo">
                        <a href=""><img src="images/img1.png" alt=""></a>
                    </div>
                    <div class="f-contact">
                        <!--<p>咨询电话</p>
                        <div class="tel"><span id="span1">400-000-0000</span></div>-->
                        <p><img src="images/img4.png" alt=""><span id="span2">安徽省合肥市蜀山区XXXXXXXXX</span></p>
                        <p><img src="images/img5.png" alt="">反馈邮箱：<span id="span3">123456789@qq.com</span></p>
                    </div>
                    <div style="margin-top: 20px;">
                        <img src="images/qrcode.png" style="width: 100px;">
                        <img src="images/qrcode1.png" style="width: 100px;margin-left: 25px;">
                    </div>
                </div>
                <div th:include="front/header::footer"></div>
            </div>
        </div>
        <div class="con-bot">
            <div class="wp">
                <div class="f-copy">北京明睿长城科技有限公司 版权所有 京ICP备2021017392号-1</div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <script src="/front/js/jquery.js"></script>
    <script src="/front/js/lib.js"></script>
    <script src="/front/js/slick.min.js"></script>
    <script src="/js/plugins/layer/layer.js"></script>
    <script src="/front/js/checkFile.js"></script>
    <script>

        var id;
        var status = 0;
        var bizType = "3201";
        var fileUrl;
        var t = 0;
        var interval;
        var interval1;
        //101 待检测图片
        //102 待检测视频
        //103 待检测音频
        //201 支持图片
        //文件上传接口
        function uploadFile(fileType) {

            // 停止定时器
            t = 0;
            clearInterval(interval);
            clearInterval(interval1);
            $("#percentRate").html("0%");
            document.getElementById('widthRate').style.width = "0%";
            $("#divHtml").html("");

            var formData = new FormData();
            var file1 = $('#file').get(0).files[0];
            if(file1 == null || file1 == '') {
                parent.layer.alert("请选择文件");
                return false;
            }
            formData.append("id","0");
            formData.append("bizType",bizType);
            formData.append("fileType",fileType)
            formData.append('file', file1);
            $.ajax({
                url: "/front/check/uploadFile",
                cache : false,
                contentType : false,
                processData : false,
                dataType : "json",
                type : "POST",
                data: formData,
                success: function (data) {
                    if (data.uploadRes == 0) {
                        id = data.id;
                        //获取文件信息
                        var formData = new FormData();
                        formData.append("id",data.id);
                        formData.append("fileID",data.fileID);
                        $.ajax({
                            url: "/front/check/getFile",
                            cache : false,
                            contentType : false,
                            processData : false,
                            dataType : "json",
                            type : "POST",
                            data: formData,
                            success: function (data) {
                                if (data.code == 0) {
                                    parent.layer.msg(data.msg);
                                    fileUrl = data.fileUrl;
                                    var html = '';
                                    if(fileType == "101") {
                                        var html = '<img src='+fileUrl+'>';
                                    }else if(fileType == "102") {
                                        /*var html = '<video id="video" controls src='+fileUrl+' style="width:600px;height:400px;">';*/
                                        creatVideo();
                                    }else if(fileType == "103") {
                                        var html = '<audio controls src='+fileUrl+'>';
                                    }
                                    if(fileType != "102") {
                                        $("#show").html(html);
                                    }
                                } else {
                                    parent.layer.alert(data.msg)
                                }
                            }
                        });
                    } else {
                        parent.layer.alert("操作失败")
                    }
                }
            });
        }

        //开始检测
        function startCheck() {
            var formData = new FormData();
            formData.append("id",id);
            $.ajax({
                url: "/front/check/startDetect",
                cache : false,
                contentType : false,
                processData : false,
                dataType : "json",
                type : "POST",
                data: formData,
                success: function (data) {
                    if (data.send_res == 0) {
                        status = data.status;
                        parent.layer.msg(data.msg);
                        //进度条定时器
                        interval = setInterval(func, 5000); //启动,func不能使用括号
                        interval1 = setInterval(funcFor, 100); //启动,func不能使用括号
                    }else {
                        parent.layer.alert("操作失败");
                    }
                }
            });
        }

        //status 业务状态 -1 未开始 0 正在检测 1 检测完毕
        // 定义定时任务
        function func(){
            if(status != 1 && id != null && id != 0) {
                var formData = new FormData();
                formData.append("id",id);
                formData.append("bizType",bizType);
                $.ajax({
                    url: "/front/check/getRes",
                    cache : false,
                    contentType : false,
                    processData : false,
                    dataType : "json",
                    type : "POST",
                    data: formData,
                    success: function (data) {
                        if (data.res == 1) {
                            // 停止定时器
                            clearInterval(interval);
                            clearInterval(interval1);
                            parent.layer.msg("检测成功");
                            $("#percentRate").html("100%");
                            document.getElementById('widthRate').style.width = "100%";
                            if(data.resInfo != "normal") {
                                var data1 = data.resInfo[bizType];
                                var array = [];
                                var nameArry = [];
                                var lengthArray = [];
                                var lenth = 0;
                                for(var item in data1){
                                    nameArry.push(item);
                                    var jValue = data1[item];//key所对应的value
                                    lenth += jValue.length;
                                    for(var i= 0; i < jValue.length; i ++) {
                                        array.push(jValue[i]);
                                    }
                                    lengthArray.push(lenth);
                                }
                                var html = '';
                                for(var i= 0; i < data.resFile.length; i ++) {
                                    var arrayFor = array[i];
                                    console.log(arrayFor);
                                    var timeParseInt = "";
                                    for(var item in arrayFor){
                                        timeParseInt = item;
                                    }
                                    var beginTime;
                                    var endTime;
                                    if(timeParseInt != null && timeParseInt != '') {
                                        var array1 = timeParseInt.split(",");
                                        beginTime = array1[0]
                                        endTime = array1[1]
                                    }
                                    var beginTimes = parseInt(beginTime/1000);
                                    var endTimes = parseInt(endTime/1000);
                                    html += '<div class="item">';
                                    html += '<div class="pic">';
                                    html += '<img src="'+ data.resFile[i] +'" alt="" onclick="videoClip('+beginTimes+','+endTimes+')">';
                                    html += '</div>';
                                    var name = '';
                                    var t = 0;
                                    for(var j= 0; j < lengthArray.length; j ++) {
                                        name = nameArry[t];
                                        if(i < lengthArray[t]) {
                                            break;
                                        }else {
                                            t = j + 1;
                                        }
                                    }
                                    html += '<p>'+ name + ": " + formatSeconds(beginTime) + '-' + formatSeconds(endTime) +'</p>';
                                    html += '</div>';
                                }
                                $("#divHtml").html(html);
                            }
                        }
                    }
                });
            }
        }

        function funcFor() {
            t += 1;
            if(t <= 99 && t >=0) {
                $("#percentRate").html(t + "%");
                document.getElementById('widthRate').style.width = t + "%";
            }else {
                clearInterval(interval1);
            }
        }

        //毫秒转化为时分秒显示
        function formatSeconds(value) {
            var theTime = parseInt(value/1000);// 秒
            var middle= 0;// 分
            var hour= 0;// 小时
            if(theTime > 60) {
                middle= parseInt(theTime/60);
                theTime = parseInt(theTime%60);
                if(middle> 60) {
                    hour= parseInt(middle/60);
                    middle= parseInt(middle%60);
                }
            }
            var result;
            var second="";
            if(parseInt(theTime) < 10) {
                second = "0" + parseInt(theTime);
            }else {
                second = parseInt(theTime);
            }
            result = second;
            var minute="";
            if(middle > 0) {
                minute = parseInt(middle);
                result = minute + ":" + result;
            }else {
                result = "0:" + result;
            }
            var hours="";
            if(hour> 0) {
                hours = parseInt(hour);
                result = hours + ":" + result;
            }
            return result;
        }

        //视频播放
        function videoClip(start, end){
            creatVideo()
            var myvideo = document.getElementById("video");
            // 获取视频观看进度
            myvideo.addEventListener("timeupdate", function () {
                console.log(myvideo.currentTime)
                //到10秒就暂停
                if(myvideo.currentTime>end) myvideo.pause()
            });
            // 从第5秒开始播放
            myvideo.currentTime = start;
            myvideo.play()
            //获取视频的总长度
            console.log(myvideo.duration)
        }

        function creatVideo(){
            fileUrl = fileUrl.replace('"','');
            fileUrl = fileUrl.replace('"','');
            var o = document.getElementById('show')
            o.innerHTML=''
            var a = document.createElement( "video");
            a.id = 'video';
            a.width = '600';
            a.height = '400';
            a.src = fileUrl;
            a.controls = 'true'
            o.appendChild(a);
        }

        function creatVideo(){
            fileUrl = fileUrl.replace('"','');
            fileUrl = fileUrl.replace('"','');
            var o = document.getElementById('show')
            o.innerHTML=''
            var a = document.createElement( "video");
            a.id = 'video';
            a.width = '600';
            a.height = '400';
            a.src = fileUrl;
            a.controls = 'true'
            o.appendChild(a);
        }

        function showPhone() {
            var telephone = $("#telephone").val();
            layer.msg(telephone)
        }

        function search() {
            var articleTitle = $("#articleTitle").val();
            if(articleTitle == null || articleTitle == '') {
                layer.msg("请输入查询关键字");
                return false;
            }
            window.location.href = "/front/news?articleTitle="+articleTitle;
        }
    </script>
</body>

</html>